<template>
  <div class="main">
    <div class="main-head">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in imgList" :key="item.name">
          <img :src="item.src" style="height:100%;width:100%;">
        </el-carousel-item>
      </el-carousel>
      <div class="main-head-area">
        <pre>{{ importantArea }}</pre>
        <el-divider><i class="el-icon-document-copy"></i></el-divider>
      </div>
    </div>
    <div class="main-body">
      <el-form label-position="top">
        <el-form-item label="1.填报日期">
          <el-input :disabled="true" :placeholder="person_information.date"></el-input>
        </el-form-item>
        <el-form-item label="2.姓名">
          <el-input :disabled="true" :placeholder="person_information.name"></el-input>
        </el-form-item>
        <el-form-item label="3.学号">
          <el-input :disabled="true" :placeholder="person_information.stu_id"></el-input>
        </el-form-item>
        <el-form-item label="4.学院">
          <el-input :disabled="true" :placeholder="person_information.school"></el-input>
        </el-form-item>
        <el-form-item label="5.身份类型">
          <el-input :disabled="true" :placeholder="person_information.type"></el-input>
        </el-form-item>
        <el-form-item label="*6.手机号码">
          <el-input type="text" v-model="person_information.phone" @blur="checkPhone($event)"></el-input>
          <el-alert :title="message.m_phone" type="error" show-icon v-if="message.m_phone !== ''"
                    class="alert_phone"></el-alert>
          <div class="alert_phone" v-else></div>
        </el-form-item>
        <el-form-item label="*7.身体状况">
          <el-select placeholder="请选择" v-model="person_information.health" style="width: 100%">
            <el-option label="良好" value="良好"></el-option>
            <el-option label="异常（发热，体温在37.3℃）" value="异常（发热，体温在37.3℃）"></el-option>
            <el-option label="异常（咳嗽）" value="异常（咳嗽）"></el-option>
            <el-option label="异常（头晕）" value="异常（头晕）"></el-option>
            <el-option label="异常（腹泻）" value="异常（腹泻）"></el-option>
            <el-option label="异常（乏力）" value="异常（乏力）"></el-option>
            <el-option label="异常（同时含两种以上的情况）" value="异常（同时含两种以上的情况）"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*7-1是否就医"
                      v-if="person_information.health !== '良好' && person_information.health.length !== 0"
                      style="width: 100%">
          <el-select placeholder="请选择" v-model="person_information.see_doctor">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="labels.t_8">
          <el-select placeholder="请选择" v-model="person_information.important_area" style="width: 100%">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="labels.t_9">
          <el-select placeholder="请选择" v-model="person_information.contact" style="width: 100%">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*10.目前所在地区">
          <v-distpicker :placeholders="input_area" :province="input_area.province" :city="input_area.city"
                        :area="input_area.area" @selected="onSelected"
          ></v-distpicker>
          <el-alert :title="message.m_location" type="error" show-icon v-if="message.m_location !== ''"
                    class="alert_phone"></el-alert>
          <div class="alert_phone" v-else></div>
        </el-form-item>
        <el-form-item label="*11.您是否为重点人群">
          <el-select placeholder="请选择" v-model="person_information.important_person" style="width: 100%">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*12.今日体温（摄氏度，精确到小数点后一位，请按照国家和学校规定如实填报，37.3以上为异常）">
          <el-input v-model="person_information.temp" @blur="checkTemp($event)">
          </el-input>
          <el-alert :title="message.m_temp" type="error" show-icon v-if="message.m_temp !== ''"
                    class="alert_phone"></el-alert>
          <div class="alert_phone" v-else></div>
        </el-form-item>
        <el-form-item>
          <div class="main-body-button">
            <el-button plain type="primary" style="width:100%" @click="handInformation" v-if="this.message.m_login === ''">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import axios from "axios"
import BMap from 'BMap'

export default {
  name: "InputMain",
  data() {
    return {
      //表格信息
      person_information: {
        stu_id: '',
        name: '',
        school: '',
        date: '',
        type: '',
        phone: '',
        health: '',
        see_doctor: '否',
        important_area: '',
        contact: '',
        now_location: '',
        important_person: '',
        temp: '',
      },
      //登录信息
      login_info: {
        stu_id: '',
        name: '',
        school: '',
        type: '',
        access_token: '',
      },
      //从前一页面获取的消息
      get_info: {
        name: '',
        school: '',
        type: '',
        access_token: '',
        stuId: ''
      },
      //输入的地址
      input_area: {
        province: '请选择所在省份',
        city: '请选择所在城市',
        area: '请选择所在区县'
      },
      //动态标题8、9
      labels: {
        t_8: '',
        t_9: '',
      },
      //相关报错信息
      message: {
        m_phone: '',
        m_temp: '',
        m_location: '',
        m_login: '',
      },
      //轮播图地址
      imgList: [
        {
          name: "1",
          src: require("@/assets/1.jpg"),
        },
        {
          name: "2",
          src: require("@/assets/2.jpg"),
        },
        {
          name: "3",
          src: require("@/assets/3.jpg"),
        },
        {
          name: "4",
          src: require("@/assets/4.jpg"),
        },
        {
          name: "5",
          src: require("@/assets/5.jpg"),
        }
      ],
      //中高风险地区
      importantArea: "",
      //当前ip地址
      location: {
        province: "",
        city: "",
        district: "",
        success: false,
      }
    }
  },
  methods: {
    //获取初始化数据
    initLoginInfo() {
      this.login_info.name = this.get_info.name;
      this.login_info.stu_id = this.get_info.stuId;
      this.login_info.school = this.get_info.school;
      this.login_info.type = this.get_info.type;
      this.login_info.access_token = this.get_info.access_token;
    },
    //初始化学号等信息
    initInformation() {
      this.person_information.stu_id = this.login_info.stu_id;
      this.person_information.name = this.login_info.name;
      this.person_information.school = this.login_info.school;
      this.person_information.type = this.login_info.type;
    },
    //获取中高风险地区名单
    getImportantArea() {
      axios.post("/myapi/importantArea").then(response => {
            this.importantArea = response.data;
          }, error => {
            console.log(error)
          }
      )
    },
    //获取当前ip地址
    getLocation() {
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(function getinfo(position) {
        _this.location.province = position.address.province;
        _this.location.city = position.address.city;
        _this.location.district = position.address.district;
        _this.success = true;
      }, function () {
        this.success = false;
      }, {provider: 'baidu'})
    },
    //获得当前日期
    getDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      }
      this.person_information.date = date.year + '-' + date.month + '-' + date.date
    },
    //动态获取两个标题
    getSevenDays() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const fortyDate = new Date(nowDate);
      fortyDate.setDate(nowDate.getDate() - 14);
      const date2 = {
        year: fortyDate.getFullYear(),
        month: fortyDate.getMonth() + 1,
        date: fortyDate.getDate(),
      };
      const forty_days = date2.year + '年' + date2.month + '月' + date2.date + '日至' + date.year + '年' + date.month + '月' + date.date + '日';
      this.labels.t_8 = '*8.' + forty_days + '是否到达或途经疫情重点防控地区';
      this.labels.t_9 = '*9.' + forty_days + '您是否有接触过疑似/确诊病例';
    },
    //判断当前位置是否正确
    onSelected(data) {
      if (data.province.value !== "请选择所在省份" && data.city.value !== "请选择所在城市" && data.area.value !== "请选择所在区县") {
        if (data.city.value !== this.location.city) {
          console.log(this.location)
          this.message.m_location = "您选择的所在位置与您当前定位不一致！";
          data.province.value = "请选择所在省份";
          data.city.value = "请选择所在城市";
          data.area.value = "请选择所在区县";
        } else {
          this.message.m_location = ""
          this.input_area.province = data.province.value;
          this.input_area.city = data.city.value;
          this.input_area.area = data.area.value;
          this.person_information.now_location = data.province.value + data.city.value + data.area.value;
        }
      } else {
        this.message.m_location = "请选择您当前所在地区！"
      }
    },
    //检查输入手机号码是否一致
    checkPhone(event) {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号
      const phone = event.target.value;
      if (phone === '') {
        this.message.m_phone = '手机号码不能为空';
      } else if (!reg.test(phone)) {
        this.message.m_phone = '手机号码格式有误';
      } else {
        this.message.m_phone = '';
      }
    },
    //检查体温是否符合格式
    checkTemp(event) {
      const reg = /^\d+\.\d{1}$/;
      const temp = event.target.value;
      console.log(temp)
      if (temp === '') {
        this.message.m_temp = '体温信息不能为空';
      } else if (!reg.test(temp)) {
        this.message.m_temp = '体温信息格式错误';
      } else {
        this.message.m_temp = '';
      }
    },
    //提交信息到后端
    handInformation() {
      var that = this;
      axios({
        url: '/myapi/authorize/token/isValid',
        method: 'get',
        headers: {
          'authorization': 'Bearer' + that.get_info.accessToken
        }
      }).then((response) => {
        if(response.data != true){
          console.log('校验无效')
          that.$router.replace({path: "/login"})
        }else{
          axios.post('/myapi/handInfo',
              that.person_information)
              .then(function (response) {
                console.log(response.data);
                console.log(that);
                that.message.m_login = response.data;
                console.log(that.message.m_login);
                if (that.message.m_login == '打卡成功') {
                  console.log(2222)
                  that.$notify({
                    title: '成功',
                    message: that.message.m_login,
                    type: 'success',
                  })
                } else if (that.message.m_login == '打卡发生错误' || that.message.m_login == '该学生今日已打卡，请勿重复提交') {
                  console.log(1111)
                  that.$notify.error({
                    title: '错误',
                    message: that.message.m_login,
                    duration: 0,
                  })
                }
              })
              .catch(function (error) {
                console.log(error)
              });
        }
      })

    },
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'margin:0;');
    this.initLoginInfo();
    this.initInformation();
    this.getDate();
    this.getSevenDays();
    this.getImportantArea();
    this.getLocation();
  },
  created() {
    this.get_info = JSON.parse(window.localStorage.getItem('Info'))
  },

  components: {
    VDistpicker
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}

.main-head {
  width: 78%;
  margin: auto;
}

.main-body {
  width: 78%;
  margin: auto auto 200px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.alert_phone {
  height: 32px;
  margin-top: 5px;
}

.main-head-area {
  font-size: 15px;
  color: red;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
}

.main-body-button {
  margin-bottom: 100px;
}

</style>